<template>
  <div>
    <!--top-->
    <div class="sidebar-top">
      <div>订餐后台管理系统</div>
      <div @click="loginout">退出</div>
    </div>
    <div class="sidebar-cont">
      <el-menu :default-active="ac_index" @select="Select">
        <div v-for="(item, index) in menu" :key="index">
          <router-link :to="{path: item.route}">
            <el-menu-item v-if="item.Subclass.length == 0" :index="item.id">
              <el-icon><component :is="item.icon"></component></el-icon>
              <span>{{ item.title }}</span>
            </el-menu-item>
          </router-link>
          <!--二级菜单-->
          <el-sub-menu v-if="item.Subclass.length > 0" :index="item.id">
            <template #title>
              <el-icon><component :is="item.icon"></component></el-icon>
              <span>{{ item.title }}</span>
            </template>
            <div v-for="(two, index_two) in item.Subclass" :key="index_two">
              <router-link :to="{path: two.route}">
                <el-menu-item :index="two.id">{{ two.title }}</el-menu-item>
              </router-link>
            </div>
          </el-sub-menu>
        </div>
      </el-menu>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import {ref, shallowRef, onMounted, getCurrentInstance} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {
  Histogram,
  Avatar,
  Dessert,
  WalletFilled,
} from "@element-plus/icons-vue";
export default {
  components: {
    Histogram,
    Avatar,
    Dessert,
    WalletFilled,
  },
  setup() {
    const {proxy} = getCurrentInstance();
    const Array = [
      {
        id: "1",
        icon: "Histogram",
        title: "数据分析",
        route: "/dataAnalysis",
        Subclass: [],
      },
      {
        id: "2",
        title: "用户列表",
        icon: "Avatar",
        route: "/userpage",
        Subclass: [],
      },
      {
        id: "3",
        title: "订单管理",
        icon: "WalletFilled",
        route: "/order",
        Subclass: [], //是否又二级菜单
      },
      {
        id: "4",
        title: "菜品管理",
        icon: "Dessert",
        route: "/dish",
        Subclass: [],
      },
      {
        id: "5",
        title: "员工管理",
        icon: "Avatar",
        route: "",
        Subclass: [
          {
            id: "5-1",
            title: "员工详情",
            route: "/employees/employee",
          },
          {
            id: "5-2",
            title: "课程学习",
            route: "/employees/course",
          },
        ],
      },
    ];
    const menu = shallowRef(Array);
    //菜单激活回调

    //#region  菜单路由切换
    const ac_index = ref("1");
    function Select(index, path) {
      console.log(index);
      // 根据菜单项的索引获取路由路径
      //#region  切换路由方法二
      // let route = null;
      // const menuItem = menu.value.find((item) => item.id === path[0]);
      // if (menuItem.Subclass.length > 0) {
      //   //console.log(menuItem.Subclass);
      //   const subMenuItem = menuItem.Subclass.find(
      //     (subItem) => subItem.id === path[1]
      //   );
      //   //console.log(subMenuItem);
      //   if (subMenuItem && subMenuItem.route) {
      //     localStorage.setItem("menuid", JSON.stringify(path[1]));
      //     route = subMenuItem.route;
      //     //localStorage.setItem("menuid", JSON.stringify(path[1]));
      //   }
      //   //const twomneu=menuItem.Subclass.
      //   //console.log(path[1]);
      // } else {
      //   route = menuItem ? menuItem.route : null;
      //   //console.log(route);
      //   if (route) {
      //     localStorage.setItem("menuid", JSON.stringify(index));
      //   }
      // }
      // new proxy.$router.push(route);
      // #endregion
    }
    onMounted(() => {
      ac_index.value = JSON.parse(localStorage.getItem("menuid"));
    });
    //#endregion
    //#region 退出登录处理
    function loginout() {
      ElMessageBox.confirm("是否退出登录?", "退出系统", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "success",
      })
        .then(() => {
          ElMessage({
            type: "success",
            message: "成功退出登录",
          });
          localStorage.removeItem("menuid");
          localStorage.removeItem("token");
          new proxy.$router.push("/");
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消退出",
          });
        });
    }
    //#endregion
    return {menu, ac_index, Select, loginout};
  },
};
</script>
